<extend name="User/index"/>
<block name="pageContent">
    <style>
        a:hover{color: #333;}
        h3{line-height: 2.5em;background-color: #D8D6D6;padding:0 .5em;}
        body{background-color: #e9e9e9;}
        .dingdan{background-color: #e9e9e9;}
        .dingdan li{background-color: #fff;margin-bottom: 1em;}
        .dingdan .order-top{padding: 0 1em;line-height: 2em;}
        .dingdan .order-con{width:100%;border-bottom: 1px solid #ececec;padding: 1em;}
        .dingdan .order-con:after{content: '';display: block;clear: both;}
        .dingdan .order-con .order-img{width: 28%;float: left;}
        .dingdan .order-con .order-txt{float: left;padding-left: 1em;width: 66%;box-sizing: border-box;}
        .dingdan .order-con .order-txt .order-title{min-height: 4em;font-size: 1.5em;}
        .dingdan .order-con .order-txt .order-title h2{margin-top: 1em;}
        .dingdan .order-con .order-txt p{text-align: right}
        .dingdan .order-bottom{text-align: right;padding: 1em ;}
        .dingdan .order-bottom a{display: inline-block;width: 7em;height: 2.5em;line-height: 2.5em;border: 1px solid #b9b9b9;border-radius: 8px;text-align: center;}
        .dingdan .order-bottom a.order_on{background-color:#FF6833;color: #fff;border: 1px solid #FF6833;}


        .good_nav{width: 100%;height: 2.5em;background-color: #F0EFF4;box-sizing: border-box;display: flex;padding: 0.5em 0;font-size: 1.5em;}
        .good_nav .good_nav_sub{width: 33.3%;border-left: solid 1px #D4D4D4;height: 100%;text-align: center;position: relative;}
        .good_nav .good_nav_sub:first-child{border-left:none;}
        .good_nav .good_nav_sub.on a{color: red;}
        .icon_down{background: url("/Public/Home/images/down.png") no-repeat 0.1em;padding:0 1em;}
        .icon_up{background: url("/Public/Home/images/up.png") no-repeat 0.1em;padding:0 1em;}
        .good_nav .good_nav_sub1{
            top: 6.5em;position:fixed;width: 301%;min-height: 10em;z-index: 999;left: 0;
            text-align: left;box-sizing: border-box;display: none;
        }
        .good_nav .good_nav_sub1 ul{padding: 1em;background-color: #fff; }
        .good_nav .good_nav_sub1 li{padding: 0.5em 0;border-bottom: solid 1px #D4D4D4; }
        .good_nav .good_nav_sub1 li a{display: inline-block;width: 100%;height: 100%; }
        .good_nav .good_nav_sub1 li:last-child{border-bottom:none }
        .pop{width: 101%;background-color: rgba(0,0,0,0.5);height: 90em;}
        .pop .on a{color: red;}


    </style>

    <div class="good_nav">
        <div class="good_nav_sub ">订单类型&nbsp; <i class="icon_down"></i>
        <div class="good_nav_sub1">
            <div class="pop">
                <ul>
                    <li class="<if condition="I('type')===''">on </if> "><a href="{:U('User/order')}">全部</a></li>
                    <li class="<if condition="I('type')==='1'">on </if> "><a href="{:U('User/order?type=1')}">活动订单</a></li>
                    <li class="<if condition="I('type')==='2'">on </if> "><a href="{:U('User/order?type=2')}">会员升级订单</a></li>
                </ul>
            </div>

        </div>
    </div>
        <div class="good_nav_sub <if condition="I('pay_status')==='0'">on</if> "><a href="{:U('User/order?pay_status=0')}">未付款</a></div>
        <div class="good_nav_sub  <if condition="I('pay_status')==='10'">on</if> "><a href="{:U('User/order?pay_status=10')}">已付款</a></div>
    </div>
    <div class="dingdan">
        <ul>

  <volist name="result" id="vo">
            <li>
                <div class="order-top"><span>订单号：{$vo.order_sn}</span><span style="float: right">创建时间：{$vo.order_sn|time_format}</span></div>
                <div class="order-con">
                    <a href="{:U('Order/order_details',array('id'=>$vo['id']))}">
                    <div class="order-img"><img width="100%" src="{$vo.active_img}" alt=""></div>
                    <div class="order-txt">
                        <div class="order-title">
                            {$vo.active_name}
                            <h2 class="red">
                                <if condition="$vo['active_price'] neq '0'">
                                    ¥{$vo.active_price}
                                    <else/>
                                    免费
                                </if>
                            </h2>
                        </div>
                        <p class="red">共1件商品 合计：¥{$vo.active_price}</p>
                    </div>
                    </a>
                </div>
                <if condition="$vo['pay_status'] eq '10'">
                <div class="order-bottom">
                    <a href="{:U('Order/order_details',array('id'=>$vo['id']))}">订单详情</a>
                    <a  href="javascript:void(0);">已付款</a>
                </div>
                <elseif  condition="$vo['status'] eq '0'"/>
                <div class="order-bottom">
                    <!--<a href="javascript:concel({$vo.id})">取消订单</a>-->
                    <a href="{:U('Order/order_details',array('id'=>$vo['id']))}">订单详情</a>
                    <a class="order_on" href="{:U('Order/vip',array('id'=>$vo['id']))}">去付款</a>
                </div>
                </if>
            </li>
       
       </volist>
        </ul>
    </div>

<script type="text/javascript"> 
function concel(id) {
   if(confirm("确定要取消订单吗？"))
     {
        
     }
}


</script>
    <script>
        $('.good_nav_sub').click(function () {
            $(this).siblings().children('.good_nav_sub1').css('display','none');
            if ($(this).children('.good_nav_sub1').css('display')==='none')
                $(this).children('.good_nav_sub1').css('display','block');
            else
                $(this).children('.good_nav_sub1').css('display','none');

        });
    </script>

</block>